<template>
  <a-flex justify="space-between" align="center">
    <a-space>
      <a-avatar :src="avatar" :size="70"></a-avatar>
      <div>
        <div class="banner-title">早安，{{userInfo?.username}}，祝你开心每一天！</div>
        <div>
          <team-outlined/>
          {{orgStore.data?.name}} / {{orgStore.data?.role_name}} {{orgStore.data?.role_slug}}
        </div>
      </div>
    </a-space>
    <a-space size="large">
      <a-statistic title="项目总数" value="1262" />
      <div class="divider-line"></div>
      <a-statistic title="订单总数" value="1262" />
      <div class="divider-line"></div>
      <a-statistic title="营业额" value="126052" />
    </a-space>
  </a-flex>
</template>

<script setup lang="ts">
import avatar from "@/assets/avatar/avatar_5.png";
import {TeamOutlined} from "@ant-design/icons-vue";
import {getUserInfo} from "@/utils/auth.ts";
import {useOrgStore} from "@/store/modules/organization";
const userInfo = getUserInfo()
const orgStore = useOrgStore()
</script>

<style scoped>
.banner-title {
  font-size: 20px;
  margin-bottom: var(--space-sm);
}
.divider-line{
  width: 1px;
  height: 40px;
  background-color: #f0f0f0;
  overflow: hidden;
}
</style>